iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
1
自我挑戰組

react.js 的學習筆記 (沒在用硬要學系列 第 8

day 8 事件與state的說明(組件狀態)

  • 分享至 

  • xImage
  •  

基本事件

先再創建一個App2.js 裡面程式碼打

import React, { Component } from 'react'

export default class App2 extends Component {
    goClick(e){
        console.log('觸發');
    }
    render() {
        return (
            <div>
                <p>0</p>
                <button onClick={this.goClick}>點我</button>
            </div>
        )
    }
}

index.js 修改

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
import App from './App2';



ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

輸出畫面

https://ithelp.ithome.com.tw/upload/images/20200908/20110292uRMQfN9HwM.png

state基本使用

import React, { Component } from 'react'

export default class App2 extends Component {

    constructor(props) {
        super(props);
        this.state = { gonum : 0 };
      }

    goClick(e){
        // console.log('觸發');
        this.setState({
            gonum : this.state.gonum+1
        })
    }
    render() {
        return (
            <div>
                <p>{ this.state.gonum }</p>
                <button onClick={this.goClick.bind(this)}>點我</button>
            </div>
        )
    }
}

再react裡面它是每個組件都有一個狀態也就是state,跟寫JS&JQ不一樣的概念,操作狀態來改變畫面。

    constructor(props) {
        super(props);
        this.state = { 
            自訂:自訂
        };
      }

constructor,super都是固定的寫法,需要背下來,這是react的構造函數

 <button onClick={this.goClick.bind(this)}>點我</button>

goClick後面的bind(),是傳值把this傳到goClick()裡面

簡化state

如果上面覺得很難背也沒關係,直接偷懶更簡單的方式

import React, { Component } from 'react'

export default class App2 extends Component {

      state = {
        gonum : 0
      }


    goClick(e){
        this.setState({
            gonum : this.state.gonum+1
        })
    }
    render() {
        return (
            <div>
                <p>{ this.state.gonum }</p>
                <button onClick={this.goClick.bind(this)}>點我</button>
            </div>
        )
    }
}

直接state甚麼構造函數都不用

輸出畫面

https://ithelp.ithome.com.tw/upload/images/20200908/20110292rdxacrF1eJ.png

自己寫一個小按鈕

import React, { Component } from 'react'

export default class App2 extends Component {

      state = {
        gonum : false
      }


    goClick(e){
 
         this.setState({
            gonum : !this.state.gonum
        })
    }
    render() {
        return (
            <div>
        <button onClick={this.goClick.bind(this)}>
            {this.state.gonum ? 'No' : 'Yes'}
        </button>
            </div>
        )
    }
}

輸出畫面

點擊後NO & YES 互相交換
https://ithelp.ithome.com.tw/upload/images/20200908/201102924q3KplSosZ.png

點擊+1跟小按鈕一起

import React, { Component } from 'react'

export default class App2 extends Component {

      state = {
        gonum : 0,
        gonoyes:false
      }


    goClick(e){
 
         this.setState({
            gonum : this.state.gonum+1 ,
            gonoyes : !this.state.gonoyes
        })
    }
    render() {
        return (
            <div>
                <p>{ this.state.gonum }</p>
                <button onClick={this.goClick.bind(this)}>{this.state.gonoyes ? 'No' : 'Yes'}</button>
            </div>
        )
    }
}

輸出畫面

https://ithelp.ithome.com.tw/upload/images/20200908/201102925ckgMCESK0.png


上一篇
day 7 props設定預設值
下一篇
day 9 其他bind() 的使用方式
系列文
react.js 的學習筆記 (沒在用硬要學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言